/*
 * @Description: 流程管理 - 列表
 * @Author: Rfan
 * @Date: 2022-12-11 11:34:13
 * @LastEditTime: 2022-12-11 17:00:11
 */

import { Key, useEffect, useMemo, useState } from 'react';
import { Button, Space, Table } from 'antd';
import { useFormatMessage } from '@/utils/intlHelpers';
import { useFlowMgtContext } from '../contexts/FlowMgtContext';
import EditFlowDialog from './dialogs/EditFlowDialog';
import type { IPageQuery } from '@/interfaces/global';
import type { ColumnsType } from 'antd/es/table';
import DesignFlowDialog from '@/view/sysMaintenance/FlowMgt/components/dialogs/DesignFlowDialog';
import { IProcessListResponse } from '@/api/workFlow/mgt';

const PageList = () => {
  const {
    list,
    getFlowList,
    selectItems,
    setSelectKey,
    delFlowItemFunc,
    deployProcessFunc,
    precessTypeFilter
  } = useFlowMgtContext();
  const formatMessage = useFormatMessage();

  // 表格加载
  const [loading, setLoading] = useState(false);
  // 总条目数
  const [total, setTotal] = useState(0);
  // 表格请求参数
  const [listQuery, setListQuery] = useState<IPageQuery>({
    pageNo: 1,
    pageSize: 10,
    param: {}
  });
  // 选中的条目
  const [selectData, setSelectData] = useState<any>({});
  // 编辑弹窗显示状态
  const [editVisible, setEditVisible] = useState(false);
  // 设计弹窗标志
  const [designDialogVisible, setDesignDialogVisible] = useState(false);

  useEffect(() => {
    setLoading(true);
    setTotal(0);
    getFlowList(listQuery)
      .then((res: any) => {
        setTotal(res?.totalCount);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [listQuery]);

  /**
   * @description 切换页码触发
   * @param {number} page 页码
   * @param {number} pageSize 每页条目数
   */
  const pageChange = (page: number, pageSize: number) => {
    setListQuery((state) => ({
      ...state,
      pageNo: page,
      pageSize
    }));
  };

  const showEditModal = (data: any) => {
    setSelectData(data);
    setEditVisible(true);
  };

  const showDesignModal = (data: any) => {
    setSelectData(data);
    setDesignDialogVisible(true);
  };

  const deployProcess = (id: Key) => {
    deployProcessFunc(id);
  };

  /**
   * @description : 表格选项相关设置
   * @param {number} selectedRowKeys 选择的项目的KEY
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectKey(selectedRowKeys);
  };

  /**
   * @description:  表格多选配置
   */
  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  const columns: ColumnsType<IProcessListResponse> = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id'
    },
    {
      title: '流程名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '流程类型',
      dataIndex: 'modelType',
      key: 'modelType',
      render: (text) => precessTypeFilter(text)
    },
    {
      title: '流程KEY',
      dataIndex: 'processKey',
      key: 'processKey'
    },
    {
      title: '创建者',
      dataIndex: 'creator',
      key: 'creator'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime'
    },
    {
      title: '更新者',
      dataIndex: 'updater',
      key: 'updater'
    },
    {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime'
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark'
    },
    {
      title: formatMessage('tableAction'),
      key: 'action',
      render: (_text: any, record) => (
        <Space>
          <Button
            type="link"
            size="small"
            onClick={() => {
              showEditModal(record);
            }}
          >
            编辑
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              deployProcess(record.id);
            }}
          >
            部署
          </Button>
          <Button type="link" size="small">
            预览
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              showDesignModal(record);
            }}
          >
            设计流程
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              delFlowItemFunc([record.id]);
            }}
          >
            删除
          </Button>
        </Space>
      )
    }
  ];

  return (
    <>
      <Table
        columns={columns}
        dataSource={list}
        loading={loading}
        rowKey="id"
        rowSelection={rowSelection}
        bordered
        pagination={{
          current: listQuery.pageNo,
          pageSize: listQuery.pageSize,
          total,
          onChange: pageChange
        }}
      />

      {/* 编辑弹窗 */}
      {useMemo(
        () => (
          <EditFlowDialog
            visible={editVisible}
            data={selectData}
            onClose={() => {
              setEditVisible(false);
            }}
          />
        ),
        [editVisible]
      )}

      {/* 设计弹窗 */}
      {useMemo(
        () => (
          <DesignFlowDialog
            visible={designDialogVisible}
            data={selectData}
            onClose={() => {
              setDesignDialogVisible(false);
            }}
          />
        ),
        [designDialogVisible]
      )}
    </>
  );
};

export default PageList;
